<rd-header>
  <rd-header-title title-text="Endpoint details">
      <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})" ui-sref-opts="{reload: true}">
          <i class="fa fa-sync" aria-hidden="true"></i>
      </a>
  </rd-header-title>
  <rd-header-content>
    <a ui-sref="portainer.endpoints">Endpoints</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a>
  </rd-header-content>
</rd-header>

<div class="row">
  <information-panel ng-if="endpoint.Type === 4 && endpoint.EdgeID" title-text="Edge information">
    <span class="small text-muted">
      <p>
        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
        This Edge endpoint is associated to an Edge environment.
      </p>
      <p>
        Edge key: <code>{{ endpoint.EdgeKey }}</code>
      </p>
      <p>
        Edge identifier: <code>{{ endpoint.EdgeID }}</code>
      </p>
    </span>
   </information-panel>
  <information-panel ng-if="endpoint.Type === 4 && !endpoint.EdgeID" title-text="Deploy an agent">
    <span class="small text-muted">
      <p>
        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
        Deploy the Edge agent on your remote Docker environment using the following command
      </p>
     <div style="margin-top: 10px;">
       <uib-tabset active="state.deploymentTab">
          <uib-tab index="0" heading="Standalone">
           <code style=display:block;white-space:pre-wrap>
             docker run -d -v /var/run/docker.sock:/var/run/docker.sock \
              -v /var/lib/docker/volumes:/var/lib/docker/volumes \
              -v /:/host \
              --restart always \
              -e EDGE=1 \
              -e EDGE_ID={{ randomEdgeID }} \
              -e CAP_HOST_MANAGEMENT=1 \
              -p 8000:80 \
              -v portainer_agent_data:/data \
              --name portainer_edge_agent \
              portainer/agent
           </code>
          </uib-tab>
          <uib-tab index="1" heading="Swarm">
           <code style=display:block;white-space:pre-wrap>
             docker network create \
              --driver overlay \
              portainer_agent_network;

             docker service create \
              --name portainer_edge_agent \
              --network portainer_agent_network \
              -e AGENT_CLUSTER_ADDR=tasks.portainer_edge_agent \
              -e EDGE=1 \
              -e EDGE_ID={{ randomEdgeID }} \
              -e CAP_HOST_MANAGEMENT=1 \
              --mode global \
              --publish mode=host,published=8000,target=80 \
              --constraint 'node.platform.os == linux' \
              --mount type=bind,src=//var/run/docker.sock,dst=/var/run/docker.sock \
              --mount type=bind,src=//var/lib/docker/volumes,dst=/var/lib/docker/volumes \
              --mount type=bind,src=//,dst=/host \
              --mount type=volume,src=portainer_agent_data,dst=/data \
              portainer/agent
           </code>
          </uib-tab>
        </uib-tabset>
       <div style="margin-top: 10px;">
         <span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentDeploymentCommand()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy command</span>
         <span id="copyNotificationDeploymentCommand" style="margin-left: 7px; display: none; color: #23ae89;">
           <i class="fa fa-check" aria-hidden="true" ></i> copied
         </span>
       </div>
     </div>
      <div class="col-sm-12 form-section-title" style="margin-top: 25px;">
        Join token
      </div>
      <p>
        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
        Use the following join token to associate the Edge agent with this endpoint
      </p>
      <p>
          The agent will communicate with Portainer via <u>{{ edgeKeyDetails.instanceURL }}</u> and <u>tcp://{{ edgeKeyDetails.tunnelServerAddr }}</u>
      </p>
      <div style="margin-top: 10px; overflow-wrap: break-word;">
       <code>
        {{ endpoint.EdgeKey }}
       </code>
       <div style="margin-top: 10px;">
         <span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentKey()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy token</span>
         <span id="copyNotificationEdgeKey" style="margin-left: 7px; display: none; color: #23ae89;">
           <i class="fa fa-check" aria-hidden="true" ></i> copied
         </span>
       </div>
     </div>
    </span>
  </information-panel>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title">
            Configuration
          </div>
          <!-- name-input -->
          <div class="form-group">
            <label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="container_name" ng-model="endpoint.Name" placeholder="e.g. docker-prod01">
            </div>
          </div>
          <!-- !name-input -->
          <!-- endpoint-url-input -->
          <div class="form-group" ng-if="endpoint.Type !== 4">
            <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
              Endpoint URL
              <portainer-tooltip position="bottom" message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."></portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input ng-disabled="endpointType === 'local' || endpoint.Type === 3" type="text" class="form-control" id="endpoint_url" ng-model="endpoint.URL" placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375">
            </div>
          </div>
          <!-- !endpoint-url-input -->
          <!-- endpoint-public-url-input -->
          <div class="form-group" ng-if="endpoint.Type !== 3">
            <label for="endpoint_public_url" class="col-sm-3 col-lg-2 control-label text-left">
              Public IP
              <portainer-tooltip position="bottom" message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the endpoint URL."></portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com">
            </div>
          </div>
          <azure-endpoint-config ng-if="endpoint.Type === 3"
            application-id="endpoint.AzureCredentials.ApplicationID"
            tenant-id="endpoint.AzureCredentials.TenantID"
            authentication-key="endpoint.AzureCredentials.AuthenticationKey"
          ></azure-endpoint-config>
          <!-- !endpoint-public-url-input -->
          <div class="col-sm-12 form-section-title">
            Metadata
          </div>
          <!-- group -->
          <div class="form-group">
            <label for="endpoint_group" class="col-sm-3 col-lg-2 control-label text-left">
              Group
            </label>
            <div class="col-sm-9 col-lg-10">
              <select ng-options="group.Id as group.Name for group in groups" ng-model="endpoint.GroupId" id="endpoint_group" class="form-control"></select>
            </div>
          </div>
          <!-- !group -->
          <!-- tags -->
          <div class="form-group">
            <tag-selector
              tags="availableTags"
              model="endpoint.Tags"
            ></tag-selector>
          </div>
          <!-- !tags -->
          <!-- endpoint-security -->
          <div ng-if="endpointType === 'remote' && endpoint.Type !== 3 && endpoint.Type !== 4">
            <div class="col-sm-12 form-section-title">
              Security
            </div>
            <por-endpoint-security form-data="formValues.SecurityFormData" endpoint="endpoint"></por-endpoint-security>
          </div>
          <!-- !endpoint-security -->
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !endpoint.Name || !endpoint.URL || (endpoint.TLS && ((endpoint.TLSVerify && !formValues.TLSCACert) || (endpoint.TLSClientCert && (!formValues.TLSCert || !formValues.TLSKey))))" ng-click="updateEndpoint()" button-spinner="state.actionInProgress">
                <span ng-hide="state.actionInProgress">Update endpoint</span>
                <span ng-show="state.actionInProgress">Updating endpoint...</span>
              </button>
              <a type="button" class="btn btn-default btn-sm" ui-sref="portainer.endpoints">Cancel</a>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
